<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Documentation Dyris</title>
<style type="text/css">
body {background-color: #dddddd; padding: 15px;}
h1 {text-align: center; background-color: gold; color: navy; padding: 10px; border: 6px solid navy;}
h2 {color: gold; background-color: navy; padding: 5px; padding-left: 20px; margin-top: 40px;}
h3 {color: navy;}
h4 {padding-left: 10px;}
p {padding-left: 20px;}
code {color: green;}
td  {text-align: center;}
</style>
</head><body>



<h1> DYRIS - VERSION 18 </h1>



<h2>Sommaire</h2>

<ul><a href="#a1">Nouveautés par rapport à la version précédente</a><br>
<a href="#a2">Créer un nouvel exercice</a><br>
<ul>
	<a href="#a2b1">Conseils</a><br>
	<a href="#a2b2">Pour les utilisateurs de Windows</a>
</ul>
<a href="#a3">Les options</a><br>
<ul>
	<a href="#a3b1">Options générales</a><br>
	<a href="#a3b2">Options pour la notation</a><br>
	<a href="#a3b3">Options pour les appréciations</a>
</ul>
<a href="#a4">Le questionnaire</a>
<ul>
	<a href="#a4b1">Ajouter un thème</a><br>
	<a href="#a4b2">Ajouter une question</a><br>
	<a href="#a4b3">Réponses de type "cases à cocher"</a><br>
	<a href="#a4b4">Réponses de type "boutons radio"</a><br>
	<a href="#a4b5">Réponses de type "zones de texte à remplir"</a>
</ul>

<a href="#a5">Les aides à la communication</a>
<ul>
	<a href="#a5b1">Image associée à une question</a><br>
	<a href="#a5b2">Commentaires associés à une question</a><br>
	<a href="#a5b3">Boutons pour afficher des pages d'aide</a><br>
	<a href="#a5b4">Barre de caractères spéciaux</a>
</ul>
<a href="#a6">Complément</a>
<ul>
	<a href="#a6b1">Proposer plusieurs énoncés</a><br>
	<a href="#a6b2">Raccourcis</a><br>
	<a href="#a6b3">Caractères propres à Dyris</a><br>
	<a href="#a6b4">Pour les mathématiciens</a><br>
	<a href="#a6b5">L'apostrophe</a>
</ul>
<a href="#a7">La présentation</a><br>
<ul>
	<a href="#a7b1">Le fichier <i>chgt.html</i></a><br>
	<a href="#a7b2">Le fichier <i>presentation.css</i></a><br>
	<a href="#a7b3">Le fichier <i>texte.js</i></a>
</ul>
<a href="#a8">La notation</a><br>
<a href="#a9">Versions précédentes</a>
<ul>
	<a href="#a9b1">Version 1 - Novembre 2002</a><br>
	<a href="#a9b2">Version 2 - Décembre 2002</a><br>
	<a href="#a9b3">Version 3 - Janvier 2003 (Version 2 revue par Laurent Simeon)</a><br>
	<a href="#a9b4">Version 4 - Février 2003</a><br>
	<a href="#a9b5">Version 5 - Juin 2003</a><br>
	<a href="#a9b6">Version 6 - Décembre 2004</a><br>
	<a href="#a9b7">Version 7 - Septembre 2005</a><br>
	<a href="#a9b8">Version 8 - Janvier 2006</a><br>
	<a href="#a9b9">Version 9 - Avril 2006</a><br>
	<a href="#a9b10">Version 10 - Juin 2006</a><br>
	<a href="#a9b11">Version 11 - Septembre 2006</a><br>
	<a href="#a9b12">Version 12 - Janvier 2007</a><br>
	<a href="#a9b13">Version 13 - Décembre 2007</a><br>
	<a href="#a9b14">Version 14 - Avril 2008</a><br>
	<a href="#a9b15">Version 15 - Septembre 2008</a><br>
	<a href="#a9b16">Version 16 - Février 2009</a><br>
	<a href="#a9b17">Version 17 - Mai 2010</a>

</ul>
<a href="#a10">Structure du logiciel</a><br>
</ul>





<a name="a1"></a><h2>Nouveautés par rapport à la version précédente</h2>

<ul>
<li>Passage au HTML5.
</ul>




<a name="a2"></a><h2>Créer un nouvel exercice</h2>

<p>Le plus simple est de modifier le fichier <i>donnees.js</i> avec un éditeur de texte.
La structure de ce fichier ne nécessite pas de connaissance particulière en programmation.
Le fichier <i>donnees.js</i> comporte deux parties : 
<ul>
<li>Les <i>options</i>, nombreuses mais facultatives.</li>
<li>Et le <i>questionnaire</i>.</li>
</ul>
<p><u>Attention :</u></p>
<p>A la moindre erreur dans le fichier <i>donnee.js</i>, votre exercice ne fonctionnera pas
(en lançant l'exercice, la barre de défilement apparaîtra mais rien ne se chargera)!
Donc testez votre exercice, au fur et à mesure que vous le complétez.
Et si l'exercice ne se charge pas, il est possible qu'une question ne respecte pas la syntaxe correcte.
Vérifiez les parenthèses, les guillemets, les points virgules...</p>
<p>A chaque modification du fichier <i>donnees.js</i>, vous devez l'enregistrer
<i>AU FORMAT TEXTE SEULEMENT</i> avec l'encodage <i>UTF-8</i> ou <i>Unicode</i>
(les autres formats engendront des erreurs empêchant votre exercice de fonctionner correctement).</li>
</ul>

<a name="a2b1"></a><h3>Conseils</h3>

<ul>
<li>Ne mélangez pas les majuscules et minuscules pour les extensions des noms d'images.
Par exemple, si une image placée dans le dossier <i>/schemas</i> se nomme <i>Chene_liege.jpg</i> :
<ul>
<li>Ecrivez: <code>schema("schemas/Chene_liege.jpg");</code></li>
<li>Au lieu de: <code>schema("schemas/Chene_liege.JPG");</code></li>
</ul></li>
<li>Limitez vos noms de fichier aux 26 lettres non accentuées,
aux 10 chiffres et au caractère <i>UNDERSCORE</i> (le trait bas de la touche 8) pour rendre plus lisible le nom.
Par exemple, écrivez <i>Chene_liege.jpg</i> au lieu de <i>Chêne liège.jpg</i>.</li>
</ul>

<a name="a2b2"></a><h3>Pour les utilisateurs de Windows</h3>

<p>Vous devriez adopter les logiciels libres, passer au système GNU/Linux, bien plus pratique! Mais bon.
Si vous êtes tout de même sous Windows, vous disposez :</p>
<ul>
<li>De l'éditeur de texte Wordpad.</li>
<li>Du navigateur Internet Explorer.</li>
</ul>
<p>Si vous utilisez Wordpad (le bloc notes est à éviter à cause du codage des retours à la ligne) :</p>
<ul>
<li>Le fichier <i>donnees.js</i> doit être sauvegardé en texte Unicode
pour que les caractères accentués tapés dans Wordpad soient correctement présentés sur la page HTML.</li>
<li>L'extension <i>.js</i> doit être rétablie manuellement, l'extension par défaut du format texte Unicode étant .txt
(sous wordpad en tous cas).</li>
</ul>
<p>Internet Explorer bloque souvent les programmes en JavaScript placés sur disque dur ou sur CD
(aucun problème s'il est placé sur un serveur). Dans ce cas :
<ul>
<li>Modifiez les paramètres de sécurité d'Internet Explorer:
menu [Outil], commande [Options Internet], onglet [Avancé], rubrique [Sécurité], cochez la case "Autoriser le contenu actif...".</li>
<li>Ou bien utilisez un autre navigateur, FireFox par exemple.</li>
</ul>





<a name="a3"></a><h2>Les options</h2>

<p>Les options se définissent dans le fichier <i>donnees.js</i> par un ensemble de fonctions.
Elles sont facultatives si vous vous contentez des options par défaut.</p>

<a name="a3b1"></a><h3>Options générales</h3>

<p><code>mode_presentation("1");</code></p>
<p>Deux présentations sont possibles. En effet, le choix des thèmes dans la page d'accueil peut se faire:
<ul>
<li>En cochant des cases, auquel cas on peut sélectionner plusieurs thèmes : C'est le mode <code>1</code>.</li>
<li>En cliquant sur des boutons "radio", auquel cas on ne peut choisir qu'un seul thème : C'est le mode <code>2</code>.</li>
</ul>
<p><code>mode_evaluation("1");</code></p>
<p>Deux types d'évaluation sont possibles :
<ul>
  <li>Évaluation formative : Après avoir répondu à une question l'élève voit les bonnes réponses et la note obtenu pour cette question. C'est le mode <code>1</code>.</li>
  <li>Évaluation sommative : L'élève ne voit pas les bonnes réponses ni la note obtenue à la question. C'est le mode <code>2</code>.</li>
</ul>
<p>Dans tous les cas, la note finale de l'exercice est affichée dans la page d'évaluation.
L'affichage des résultats de l'ensemble des élèves n'est possible que dans le mode <code>1</code>.</p>
<p><code>mode_sauvegarde("1");</code></p>
<p>La page d'accueil peut proposer une zone de texte pour entrer les nom et prénom, auquel cas
la page d'évaluation comporte également un bouton <i>IMPRIMER</i> ou <i>ENREGISTRER LE SCORE</i>.</p>
<ul>
<li>Mode <code>1</code> : Pour ne pas avoir cette fonctionnalité.</li>
<li>Mode <code>2</code> : Pour pouvoir imprimer.</li>
<li>Mode <code>3</code> : Pour pouvoir enregistrer dans un cookie.</li>
<li>Mode <code>4</code> : Pour pouvoir enregistrer dans un fichier, lorsque Dyris est placé sur un serveur
pourvu du module PHP.</li>
</ul>
<p>Avec le mode <code>3</code>, les enregistrements se font en local dans un cookie.
La page <i>scores.html</i> permet d'afficher les scores.
Si le navigateur est configuré pour ne pas accepter les cookies,
le bouton <i>ENREGISTRER LE SCORE</i> ne s'affiche pas.</p>
<p>Avec le mode <code>4</code>, les enregistrements se font dans le fichier <i>scores.txt</i>.
La page <i>scores.php</i> permet d'afficher les scores.
Le fichier <i>scores.txt</i> doit avoir les droits d'accès en lecture et écriture.
Chaque ligne de ce fichier correspond à un enregistrement.
Au fil des sauvegardes, le fichier devient de plus en plus volumineux.
Il convient donc, de temps à autre, de le raccourcir avec un éditeur de texte.</p>
<p><code>titre_introduction("votre titre");</code></p>
<p>Indiquez, entre les guillemets, le titre qui s'affiche dans la page d'accueil.
Supprimez cette ligne si vous ne voulez pas de titre.
N'utilisez pas de guillemets dans votre titre car Dyris l'interprétera comme la fin de votre titre.</p>
<p><code>introduction("commentaire");</code></p>
<p>Indiquez, entre les guillemets, le commentaire qui s'affiche sous le titre.
Supprimez cette ligne si vous ne voulez pas de commentaire.</p>
<p><code>nombre_questions("5","10","15");</code></p>
<p>Indiquez, entre les guillemets, les nombres de questions qui seront proposés dans la page d'accueil.</p>
<ul>
<li>Si vous supprimez cette ligne, toutes les questions du fichier <i>donnees.js</i> seront posées, dans l'ordre où elles sont écrites, en fonction des thèmes sélectionnés.</li>
<li>Si vous n'indiquez qu'un seul nombre de questions, ce nombre n'apparaîtra pas dans la page d'accueil,
les questions sont choisies au hasard parmi celles disponibles dans les thèmes sélectionnés.</li>
<li>Si vous indiquez plusieurs nombres de questions, ces nombres apparaîtront dans la page d'accueil,
les questions sont choisies au hasard parmi celles disponibles dans les thèmes sélectionnés.</li>
</ul>
<p><code>bouton_sup("MODE D'EMPLOI","pages/mode_emploi.html");<br>
bouton_sup("MODE D'EMPLOI","pages/mode_emploi.html","500","300");</code></p>
<p>Afin de donner des informations complémentaires, vous pouvez ajouter des boutons dans la page d'accueil.
Ces boutons ouvrent des fenêtres contenant des pages au format HTML.
Pour chaque bouton, il vous faut indiquer :</p>
<ul>
<li>Le texte qui sera inscrit sur le bouton.</li>
<li>L'adresse de la page HTML.</li>
<li>Eventuellement, les dimensions de la fenêtre.</li>
</ul>
<p><code>message_debut("Attention: Une question peut comporter plusieurs réponses justes!");</code></p>
<p>C'est le message qui s'affichera avant de commencer l'exercice.
Pour le modifier, changez le texte entre les guillemets.
Supprimez cette ligne si vous voulez qu'aucun avertissement ne s'affiche.</p>
<p><code>message_fin("Au plaisir de vous retrouver une prochaine fois!");</code></p>
<p>C'est le message qui s'affichera en cliquant sur le bouton <i>QUITTER</i>.
Pour le modifier, changez le texte entre les guillemets.
De même, supprimez cette ligne si vous voulez qu'aucun message ne s'affiche.</p>
<p><code>url_quitter("http://dyris.free.fr/");</code></p>
<p>Lorsque vous cliquez sur le bouton <i>QUITTER</i>, la fenêtre qui contient l'exercice se ferme
(si elle est ouverte depuis une autre page).
Sauf si vous définissez ici l'adresse de la page vers laquelle vous souhaitez être redirigé.</p>

<a name="a3b2"></a><h3>Options pour la notation</h3>

<p><code>coef_rep_juste("3");</code></p>
<p>Indiquez, entre les guillemets, le coefficient correspondant à une réponse juste.
Vous devez écrire une valeur positive!
Si vous supprimez cette ligne, le coefficient par défaut est <code>1</code>.</p>
<p><code>coef_rep_fausse("-1");</code></p>
<p>Indiquez, entre les guillemets, le coefficient correspondant à une réponse fausse.
Vous devez écrire une valeur négative ou nulle!
Si vous supprimez cette ligne, le coefficient par défaut est <code>-0.5</code>.</p>
<p><code>coef_rep_nulle("-0.5");</code></p>
<p>Indiquez, entre les guillemets, le coefficient correspondant à une réponse non fournie,
c'est à dire lorsque l'élève clique sur le bouton <i>JE NE SAIS PAS</i>.
Vous pouvez écrire une valeur négative ou positive!
Si vous supprimez cette ligne, le coefficient par défaut est <code>0</code>.</p>
<p><code>note_sur("30");</code></p>
<p>La note sera ramené sur la valeur indiquée entre les guillemets. On lui attribue souvent la valeur <code>20</code>.
Si vous supprimez cette ligne, la note est ramenée sur le nombre de questions que l'utilisateur a sélectionné.</p>

<a name="a3b3"></a><h3>Options pour les appréciations</h3>

<p>Vous pouvez choisir l'appréciation à mettre selon la note obtenue par l'élève,
la note étant ici exprimée sur 20. Par exemple, si vous voulez l'appréciation <i>Résultat moyen</i> pour une note comprise entre 10 et 12,
vous devez écrire, dans le fichier <i>donnees.js</i>:</p>
<p><code>appreciation("10","12","Résultat moyen");</code></p>
<p><u>Remarque:</u> Si l'élève obtient une note correspondant à plusieurs appréciations, la dernière appréciation est prioritaire.
Par exemple, si l'élève a obtenu 12 et que le fichier <i>donnees.js</i> comporte:</p>
<p><code>appreciation("10","12","Résultat moyen");</code><br>
<code>appreciation("12","14","Bon travail");</code></p>
<p>Alors l'élève obtiendra comme appréciation: <i>Bon travail</i>.</p>
<p>Vous pouvez également mettre une appréciation lorsque l'élève quitte l'exercice avant d'avoir terminé:</p>
<p><code>non_termine("Vous avez quitté l'exercice sans avoir répondu à toutes les questions !");</code></p>





<a name="a4"></a><h2>Le questionnaire</h2>

<p>Après avoir choisi vos options dans le fichier <i>donnees.js</i>, il vous faut définir le questionnaire.
Il est constitué d'un ensemble de questions regroupées par thèmes.</p>

<a name="a4b1"></a><h3>Ajouter un thème</h3>

<p><code>theme("nouveau thème");</code></p>
<p>Pour chaque thème dont vous indiquez le titre ici, vous allez écrire des blocs de question / réponses.
Naturellement, si l'ensemble de votre questionnaire ne comporte qu'un seul thème, cette ligne est facultative.</p>

<a name="a4b2"></a><h3>Ajouter une question</h3>

<p><code>question("Où vit le personnage principal de l'histoire?");</code></p>
<p>Pour changer l'énoncé de la question, modifiez le texte entre guillemets.</p>
<p><code>question("Où vit le personnage principal de l'histoire?//2");</code></p>
<p>Par défaut, le barème pour une question est de 1 point.
Un barème différent de 1 point se définit à la fin de l'énoncé.
Par exemple, pour une question notée sur 2 points, rajoutez <code>//2</code> à la fin de l'énoncé.</p>
<p><code>question("Où vit le personnage principal de l'histoire?//a");</code></p>
<p>Suite à une question, plusieurs réponses seront proposées.
Ces réponses apparaîtront dans l'ordre où vous les écrivez, sauf si vous rajoutez <code>//a</code>
(<i>a</i> comme <i>aléatoire</i>) à la fin de l'énoncé. Dans ce cas, les réponses seront affichées dans un ordre aléatoire.</p>
<p><code>question("Où vit le personnage principal de l'histoire?//2a");</code></p>
<p>Bien sûr, une question peut être notée sur 2 points et comporter des réponses dans un ordre aléatoire.
Attention toutefois : Le mode aléatoire ne fonctionne pas pour les réponses de type "cases à remplir".</p>

<a name="a4b3"></a><h3>Réponses de type "cases à cocher"</h3>

<p><code>question("Où vit le personnage principal de l'histoire?");<br>
reponse("[x] dans une petite maison, près de la forêt");<br>
reponse("[ ] dans une petite maison, au bord de la rivière");<br>
reponse("[ ] dans un magnifique château");</code></p>
<p>Les cases à cocher sont symbolisées par les caractères:</p>
<ul>
<li><code>[x]</code> ou <code>[o]</code> ou <code>[*]</code> si la case doit être cochée.</li>
<li><code>[ ]</code> dans le cas contraire.</li>
</ul>
<p>Il est indispensable de proposer au moins deux réponses par question,
une réponse au moins doit être juste.</p>

<a name="a4b4"></a><h3>Réponses de type "boutons radio"</h3>

<p><code>question("Où vit le personnage principal de l'histoire?");<br>
reponse("(o) dans une petite maison, près de la forêt");<br>
reponse("( ) dans une petite maison, au bord de la rivière");<br>
reponse("( ) dans un magnifique château");</code></p>
<p>Les boutons radio sont symbolisés par les caractères:</p>
<ul>
<li><code>(o)</code> ou <code>(x)</code> ou <code>(*)</code> si le bouton doit être coché.</li>
<li><code>( )</code> dans le cas contraire.</li>
</ul>
<p>Il est indispensable de proposer au moins deux réponses par question,
une seule réponse doit être juste.</p>

<a name="a4b5"></a><h3>Réponses de type "zones de texte à remplir"</h3>

<p><code>question("Où vit le personnage principal de l'histoire?");<br>
reponse("dans une petite [maison||demeure], près de la [forêt]");</code></p>
<p>Le texte à compléter se met entre les caractères <code>[</code> et <code>]</code>.
Dans le cas où plusieurs réponses justes sont possibles, elles sont séparées par les caractères <code>||</code>.





<a name="a5"></a><h2>Les outils de communication</h2>

<p>Ces outils, facultatifs quoique bien pratiques, peuvent être :</p>
<ul>
<li>Une image associée à une question.
<li>Un commentaire au moment où la question est posée.
<li>Un commentaire lorsque l'élève a bien répondu.
<li>Un commentaire lorsque l'élève s'est trompé.
<li>Un commentaire lorsque l'élève a préféré ne pas répondre à la question.
<li>Un bouton pour afficher une page d'aide, disponible au moment où la question est posée.
<li>Un bouton pour afficher une page de commentaire, disponible lorsque la question est corrigée.
<li>Une barre avec des boutons permettant d'inclure des caractères spéciaux, dans les zones de texte à compléter.
</ul>
<p>Un outil de communication peut être associé :
<ul>
<li>A une seule question.
<li>A toutes les questions d'un même thème.
<li>A toutes les questions de tous les thèmes.
</ul>
<p>L'outil est défini avec une fonction, laquelle peut être située à divers endroits du fichier <i>donnee.js</i>.</p>
<ul>
<li>Placée après une question, l'outil est défini pour la question.
<li>Placée juste après un thème, l'outil est défini pour toutes les questions du thème.
<li>Placée au début du fichier <i>donnees.js</i>, l'outil est défini pour toutes les questions de tous les thèmes.
</ul>
<p>Il y a un ordre de priorité :
Un outil défini pour une question est prioritaire sur celui défini pour le thème,
lui-même prioritaire sur celui défini pour l'ensemble des thèmes.
Par exemple, si une image est associé à un thème et une autre image associée à une question de ce thème,
alors seule cette dernière image sera effectivement affichée, lorsque la question est posée.</p>

<a name="a5b1"></a><h3>Image associée à une question</h3>

<p><code>question("Où vit le personnage principal de l'histoire?");<br>
reponse("[x] dans une petite maison, près de la forêt");<br>
reponse("[ ] dans une petite maison, au bord de la rivière");<br>
reponse("[ ] dans un magnifique château");<br>
schema("schemas/image1.gif");</code></p>
<p>Pour changer l'image, modifiez le texte entre guillemets (dernière ligne). L'image:</p>
<ul>
<li>est facultative, supprimez la ligne si vous ne voulez aucune image,</li>
<li>doit être au format <i>.jpeg</i> (ou <i>.jpg</i>), <i>.gif</i> ou <i>.png</i>,</li>
<li>doit être placée dans le dossier indiqué.</li>
</ul>
<p>Dans cet exemple, le dossier se nomme <i>/schemas</i>.
Vous pouvez définir divers dossiers pour vos images.</p>
<p>Si votre exercice est placé sur un serveur dont l'accès est relativement lent,
il est préférable d'indiquer les dimensions des images.
Par exemple, si l'image <i>image1.gif</i> a une largeur de 155 pixels et une hauteur de 98 pixels, écrivez:</p>
<p><code>schema("schemas/image1.gif","155","98");</code></p>

<a name="a5b2"></a><h3>Commentaires associés à une question</h3>

<p>Vous pouvez définir toutes sortes de commentaires selon les réponses apportées par l'élève :</p>
<p><code>question("Combien y a-t-il de poissons?");<br>
reponse("[ ] 4 poissons");<br>
reponse("[ ] 5 poissons");<br>
reponse("[x] 6 poissons");<br>
reponse("[ ] 7 poissons");<br>
schema("schemas/poissons.gif");<br>
debut("Pour répondre à cette question, il te suffit juste de savoir compter.");<br>
juste("C'est exact, tu as bien compté!");<br>
faux("Attention quand tu comptes: Il faut être plus attentif!");<br>
abandon("Dommage, cette question était facile...");</code></p>
<p><code>debut(" ... ");</code> : Remplacez les trois points de suspension par le commentaire à afficher
au moment où la question est posée.</p>
<p><code>juste(" ... ");</code> : Remplacez les trois points de suspension par le commentaire à afficher
si l'élève donne une bonne réponse.</p>
<p><code>faux(" ... ");</code> : Remplacez les trois points de suspension par le commentaire à afficher
si l'élève donne une mauvaise réponse.</p>
<p><code>abandon(" ... ");</code> : Remplacez les trois points de suspension par le commentaire à afficher
si l'élève élude la question (s'il clique sur le bouton <i>JE NE SAIS PAS</i>).</p>

<a name="a5b3"></a><h3>Boutons pour afficher des pages d'aide</h3>

<p><code>question("Quel mois précède le mois de juillet?");<br>
reponse("Le mois de [juin]");<br>
bouton_indice("RAPPEL","pages/aide2.html","400","300");<br>
bouton_correction("COMPLEMENT","pages/complement.html");</code></p>
<p>Afin d'apporter une aide, un complément d'information, un renseignement supplémentaire,
vous pouvez rajouter au menu des boutons supplémentaires.
Ces boutons ouvrent des fenêtres contenant des pages au format HTML.
Deux types de boutons peuvent être créés:<p>
<ul>
<li>Celui qui s'affiche au moment où la question est posée.</li>
<li>Celui qui s'affiche lorsque la question est corrigée.</li>
</ul>
<p>Pour chaque bouton, indiquez:</p>
<ul>
<li>Le texte qui sera inscrit sur le bouton.</li>
<li>L'adresse de la page HTML.</li>
<li>Eventuellement, les dimensions de la fenêtre.</li>
</ul>

<a name="a5b4"></a><h3>Barre de caractères spéciaux</h3>

<p><code>caracteres_speciaux("œ","€","Ø");</code></p>
<p>Indiquez la liste des caractères particuliers, difficiles à obtenir au clavier, utiles pour l'exercice.
L'élève pourra insérer ces caractères dans les zones de texte à remplir, simplement en cliquant sur le bouton correspondant.</p>





<a name="a6"></a><h2>Complément</h2>

<a name="a6b1"></a><h3>Proposer plusieurs énoncés</h3>

<p>D'une manière assez générale avec Dyris, vous pouvez définir plusieurs énoncés,
séparés par les caractères <code>||</code>.
L'énoncé effectivement affiché sera pris au hasard parmi les énoncés disponibles.
Ceci est valable pour les commentaires, les messages dans les boîtes de dialogue, les appréciations...</p>
<p>Exemple :</p>
<p><code>question("Quelle est la base du verbe abuser?||Saurais-tu m'écrire la base du verbe abuser?||Connais-tu la base du verbe abuser?");</code></p>
<p>Autre exemple :</p>
<p><code>juste("Excellent !||Bravo !||Bonne réponse !||C'est très bien!");<br>
faux("Non...||Faux...||Erreur...||Inexact...||Dommage...");</code></p>

<a name="a6b2"></a><h3>Raccourcis</h3>

<p>Afin de rendre le fichier <i>donnees.js</i> plus court (donc plus rapide à charger ou à écrire),
des raccourcis ont été créés. Ainsi, vous pouvez écrire:</p>
<ul>
<li><code>quest(...</code> à la place de <code>question(...</code></li>
<li><code>rep(...</code> à la place de <code>reponse(...</code></li>
<li><code>sch(...</code> à la place de <code>schema(...</code></li>
</ul>

<a name="a6b3"></a><h3>Caractères propres à Dyris</h3>

<p>Les réponses comportent des caractères propres à Dyris.
En conséquence, les caractères ci-dessous, que vous voudriez éventuellement obtenir,
ne peuvent être écrits directement : Vous devez utiliser la désignation chiffrée correspondante.
Les caractères fréquemment utilisés ont aussi une abréviation, plus facile à retenir,
pouvant remplacer le code chiffré.<p>
<center><table border="1">
<tr><td>Caractère</td><td>Code chiffré</td><td>Abréviation</td></tr>
<tr><td>&quot;</td><td>&amp;#34;</td><td>&amp;quot;</td></tr>
<tr><td>&lt;</td><td>&amp;#60;</td><td>&amp;lt;</td></tr>
<tr><td>&gt;</td><td>&amp;#62;</td><td>&amp;gt;</td></tr>
<tr><td>&#91;</td><td>&amp;#91;</td><td>Pas d'abréviation</td></tr>
<tr><td>&#93;</td><td>&amp;#93;</td><td>Pas d'abréviation</td></tr>
</table></center>
<p>Ceci est très important. En effet, vous ne pouvez pas utiliser directement le signe <code>&lt;</code>
dans vos questions ou réponses car Dyris le comprendra comme le début d'une balise HTML.
Vous devez donc utiliser l'abréviation <code>&amp;lt;</code></p>

<a name="a6b4"></a><h3>Pour les mathématiciens</h3>

<p>Pour écrire les formules mathématiques, vous disposez de trois outils :</p>
<ul>
<li> Les caractères Unicodes.</li>
<li> Les balises HTML.</li>
<li> Les balises propres à Dyris.</li>
</ul>
<p><u>Les caractères Unicodes.</u></p>
<p>Dans le dossier <i>outils</i> se trouve le fichier <i>Unicode.html</i>.
En ouvrant ce fichier avec un navigateur, vous obtenez une liste de caractères Unicodes.
Parmi ces caractères, il y a des caractères grecs, des symboles mathématiques...
Vous pouvez insérer les caractères de votre choix dans votre questionnaire, par un simple copier-coller.</p>
<p><u>Les balises HTML.</u></p>
<p>Vous pouvez inclure, dans les questions et les réponses, des balises HTML.
Par exemple, du texte que vous voudriez placé en exposant se met entre les balises
<code>&lt;sup&gt;</code> et <code>&lt;/sup&gt;</code>. Si vous écrivez:</p>
<ul><code>
quest("La forme développée de l'expression (x+1)&lt;sup&gt;2&lt;/sup&gt; est :<br>
rep("(o) x&lt;sup&gt;2&lt;/sup&gt; + 2 x + 1");<br>
rep("( ) x&lt;sup&gt;2&lt;/sup&gt; + 1");<br>
</code></ul>
<p>Vous obtiendrez l'affichage:</p>
<ul><form><code>
La forme développée de l'expression (x+1)<sup>2</sup> est :<br>
<input type="radio" name="gft" checked> x<sup>2</sup> + 2 x + 1<br>
<input type="radio" name="gft"> x<sup>2</sup> + 1<br>
</code></form></ul>
<p>De la même manière, utilisez les balises
<code>&lt;sub&gt;</code> et <code>&lt;/sub&gt;</code> pour du texte en indice.</p>
<p><u> Les balises propres à Dyris.</u></p>
<p>Les balises HTML sont peu nombreuses pour écrire des formules mathématiques.
Pour pallier ce manque, il a été créé :</p>
<ul>
<li> Les balises <code>&lt;vec&gt;</code> et <code>&lt;/vec&gt;</code>
pour placer une flèche au dessus du texte (pour écrire un vecteur).</li>
<li> Les balises <code>&lt;alg&gt;</code> et <code>&lt;/alg&gt;</code>
pour placer une barre au dessus du texte.</li>
</ul>
<p>Ces balises s'utilisent de la même manière que les balises HTML.</p>

<a name="a6b5"></a><h3>L'apostrophe</h3>

<p>Attention, vous pouvez avoir un problème à cause des apostrophes.
En effet, plusieurs caractères permettent d'écrire l'apostrophe, lequel peut être incurvé, droit...
Autrement dit, si vous proposez la réponse :</p>
<p><code>rep("[C’est] à l'infirmerie qu'il faudra le soigner.");</code></p>
<p>Il se peut que l'élève réponde correctement mais que la réponse soit compté fausse.
La solution consiste à définir plusieurs apostrophes :</p>
<p><code>rep("[C'est||C’est] à l'infirmerie qu'il faudra le soigner.");</code></p>
<p>Ici, deux caractères différents sont utilisés pour écrire l'apostrophe.
La réponse sera compté juste si l'élève répond <i>C'est</i> ou <i>C’est</i>.</p>




<a name="a7"></a><h2>La présentation</h2>

<a name="a7b1"></a><h3>Le fichier <i>chargt.html</i></h3>

<p>La première page qui s'affiche pendant que l'exercice se charge se nomme <i>chargt.html</i>.
Vous pouvez modifier cette page pour lui donner le contenu que vous souhaitez.</p>

<a name="a7b2"></a><h3>Le fichier <i>presentation.css</i></h3>

<p>En modifiant le fichier <i>presentation.css</i>, vous obtiendrez la présentation de votre choix.
A condition de connaître la programmation des feuilles de style...</p>
<p>Si ce n'est pas le cas, vous pouvez tout de même modifier facilement les couleurs:
Elle sont définies par le caractère <code>#</code> suivi de six chiffres, correspondant au code hexadécimal de la couleur.
Vous pouvez retrouver le code hexadécimal d'une couleur avec un logiciel de dessin comme <i>The Gimp</i>, par exemple.</p>
<p>Pour vous aider, plusieurs feuilles de style sont proposées dans le dossier <i>outils</i>.
Pour utiliser le fichier <i>presentation_4.css</i>, par exemple, il suffit de  renommer le fichier <i>presentation.css</i>
(ou de l'effacer si vous n'en voulez plus) en <i>presentation_8.css</i>,
puis de renommer <i>presentation_4.css</i> en <i>presentation.css</i>. Relancez dyris et ça marche !</p>

<a name="a7b3"></a><h3>Le fichier <i>textes.js</i></h3>

<p>Il définit les textes utilisés par Dyris : Les titres des pages, les boutons, les messages qui s'affichent dans les fenêtres...
Vous pouvez remplacer ces textes par ceux de votre choix.</p>
<p>Une traduction en anglais de ce fichier est proposée dans le dossier <i>outils</i> : textesgb.js</p>





<a name="a8"></a><h2>La notation</h2>

<p>L'objet de ce paragraphe n'est pas de déterminer s'il est bon ou pas
d'attribuer une note à un exercice. Nous vous indiquons simplement comment
Dyris calcule la note attribuée à l'élève.
Cependant, nous sommes parfaitement conscients que ce mode de calcul
peut être amélioré (affichage du pourcentage de bonnes réponses, etc.)
et nous sommes à l'écoute de vos suggestions et remarques.</p>
<p>Tout d'abord, comme cela a déjà été expliqué, celui qui crée un exercice peut attribuer le barème
de son choix, à n'importe quelle question. Par défaut, le barème pour une
question est de 1 point. Un barème différent de 1 point se définit
à la fin de l'énoncé. Par exemple, pour une question notée sur 2 points,
il faut rajouter <code>//2</code> à la fin de l'énoncé:</p>
<p><code>question("Où vit le personnage principal de l'histoire?//2");</code></p>
<p>Ensuite, le calcul de la note s'effectue en fonction des coefficients définis dans le fichier "donnees.js".
Normalement, le coefficient pour une réponse juste est 1.
Si ce n'est pas le cas, les coefficients sont adaptés en respectant les proportions,
de sorte que la note maximale que peut obtenir l'élève soit égale au barème.</p>
<p>La note est donc égale au coefficient (éventuellement modifié) multiplié par le barème.</p>
<ul>
<li>L'élève répond juste: note = (coef_réponse_juste/coef_réponse_juste)*barème = barème</li>
<li>L'élève se trompe: note = (coef_réponse_fausse/coef_réponse_juste)*barème</li>
<li>L'élève ne sais pas: note = (coef_réponse_nulle/coef_réponse_juste)*barème</li>
</ul>
<p>Pour les questions ouvertes, le barème est réparti sur les cases à remplir.
Par exemple, dans le cas d'une question avec 4 cases à remplir, le barème pour chaque case est égal à <i>barème/4</i>.</p>
<p>La note finale (lorsque l'élève a répondu à toutes les questions) est ramené sur la valeur indiquée dans le fichier "donnees.js".
Et si l'élève abandonne l'exercice en cours de route, aucune note n'est donnée.</p>





<a name="a9"></a><h2>Versions précédentes</h2>

<p>A noter :</p>
<ul>
<li>La version 6 est la dernière à être compatible avec les anciens navigateurs (Netscape 4.xx).
<li>La version 12 est la dernière à utiliser l'encodage occidental, la version 13 utilisant l'encodage HTF-8.
<li>La version 18 est la première à être en HTML5.
</ul>

<a name="a9b1"></a><h3>Version 1 - Novembre 2002</h3>

<p>Première version proposée sur internet.</p>

<a name="a9b2"></a><h3>Version 2 - Décembre 2002</h3>

<ul>
<li>Paramétrage du nombre de questions à poser</li>
<li>Regroupement du fichier <i>lisez_moi</i> et de la page <i>aide</i> en une page <i>mode d'emploi</i>.</li>
</ul>

<a name="a9b3"></a><h3>Version 3 - Janvier 2003 (version 2 revue par Laurent Simeon)</h3>

<ul>
<li>Création de la page <i>evaluation.html</i> qui lance le QCM en plein écran.</li>
<li>Ajout dans la page <i>page.html</i> d'un méta tag qui enlève la barre d'outils d'IE6.</li>
<li>Ajout d'une fonction dans le fichier <i>fonction.js</i> qui désactive le clic droit sur les pages chargées.</li>
<li>Modification du fichier <i>fonction.js</i> pour charger des images en 500x500.</li>
<li>Modification de toutes les pages pour qu'elles soient compatibles avec le fichier de style <i>qcm.css</i>.</li>
</ul>

<a name="a9b4"></a><h3>Version 4 - Février 2003</h3>

<ul>
<li>Possibilité de sélectionner plusieurs thèmes.</li>
<li>Suppression du dessin <i>vide.gif</i>.</li>
</ul>

<a name="a9b5"></a><h3>Version 5 - Juin 2003</h3>

<ul>
<li>QCM lancé en plein écran.</li>
<li>Gestion des cas particuliers pour les options.</li>
<li>Choix pour les couleurs augmenté.</li>
<li>Possibilité de modifier la langue.</li>
<li>Création du site <i>http://dyris.free.fr</i></li>
</ul>

<a name="a9b6"></a><h3>Version 6 - Décembre 2004</h3>

<ul>
<li>Message d'attente pendant le chargement de l'application.</li>
<li>Présentation et couleurs entièrement dépendantes d'une feuille de style.</li>
<li>Modification de la structure du fichier <i>langues.js</i>.</li>
<li>Compatibilité avec les divers navigateurs améliorée.</li>
<li>Ajout de raccourcis pour le fichier <i>donnees.js</i>.</li>
<li>Commentaires dans le programme supprimés et placés dans le fichier <i>Lisez-moi.txt</i>.</li>
<li>Dimensions quelconques pour les images associées aux questions.</li>
</ul>

<a name="a9b7"></a><h3>Version 7 - Septembre 2005</h3>

<ul>
<li>Paramétrage de la notation.</li>
<li>Redirection vers une page au choix en cliquant sur le bouton <i>QUITTER</i>.</li>
<li>Possibilité d'ajouter un bouton <i>IMPRIMER</i> sur la dernière page.</li>
<li>Traduction en espagnol.</li>
<li>Abandon des tableaux pour la mise en page (la version 6 est la dernière à être compatible avec les anciens navigateurs).</li>
<li>Boutons remplacés par des liens.</li>
</ul>

<a name="a9b8"></a><h3>Version 8 - Janvier 2006</h3>

<ul>
<li>Cette documentation est intégrée à l'archive à télécharger, chaque version de Dyris étant différente.</li>
<li>En plus des questions avec des cases à cocher, il est possible de créer des questions avec des zones de texte à compléter.</li>
<li>La présentation des réponses de type <i>cases à cocher</i>, dans le fichier <i>donnees.js</i>, est modifiée.</li>
</ul>

<a name="a9b9"></a><h3>Version 9 - Avril 2006</h3>

<ul>
<li>Deux affichages possibles pour le choix des thèmes dans la page d'accueil.</li>
<li>En plus des questions avec des cases à cocher, avec des zones de texte à compléter,
il est possible de créer des questions avec des boutons radio (une seule réponse peut être cochée).</li>
<li>Une option permet de poser les questions dans l'ordre où elles sont écrites dans le fichier <i>donnees.js</i>.</li>
<li>Modification de la présentation des options.</li>
</ul>

<a name="a9b10"></a><h3>Version 10 - Juin 2006</h3>

<ul>
<li>Possibilité de choisir un barème pour chaque question.</li>
<li>Affichage du barème et de la note obtenue pour chaque question.</li>
<li>Possibilité de définir les dimensions des images associées aux questions.</li>
<li>Paramétrage des appréciations dans le fichier <i>donnees.js</i>.</li>
<li>Modification du code pour le bug <i>Peekaboo</i> d'IE6.</li>
</ul>

<a name="a9b11"></a><h3>Version 11 - Septembre 2006</h3>

<ul>
<li>Possibilité d'enregistrer les notes obtenues dans un cookie (code proposé par
<a href="mailto:g.surgand@9online.fr">Gérard Surgand</a>).</li>
<li>Ouverture de la liste de diffusion <a href="http://fr.groups.yahoo.com/group/dyris/messages">
http://fr.groups.yahoo.com/group/dyris/messages</a>.</li>
<li>Liens remplacés par des balises &lt;button&gt; pour les boutons.</li>
<li>Modification de l'apparence du menu dans la page où sont posées les questions.</li>
<li>Dans les questions de type "zones de texte à remplir", mise du focus dans la première case.</li>
</ul>

<a name="a9b12"></a><h3>Version 12 - Janvier 2007</h3>

<ul>
<li>Mode d'emploi placé dans une page à part, au format HTML, et paramétrage du bouton permettant d'y accéder.</li>
<li>Pour chaque question, possibilité de créer des boutons qui ouvrent des fenêtres contenant des pages au format HTML.</li>
<li>Modification de la structure du fichier <i>langues.js</i>, renommé <i>textes.js</i>.</li>
<li>Amélioration de la présentation de la page <i>scores.html</i>.</li>
<li>Modification de la mise en page et de la feuille de style associée pour offrir plus de possibilités au niveau de la présentation.</li>
<li>Création du dossier <i>outils</i> qui contient les exemples de feuilles de style <i>presentatation_x.css</i>
et les traductions du fichier <i>textes.js</i>.</li>
</ul>

<a name="a9b13"></a><h3>Version 13 - Décembre 2007</h3>

<ul>
<li>Passage en UTF-8.</li>
<li>Création des balises &lt;vec&gt; et &lt;/vec&gt;, &lt;alg&gt; et &lt;/alg&gt;
pour pouvoir écrire des vecteurs ou des mesures algébriques, dans le questionnaire.</li>
<li>Ajout possible de nombreux commentaires, dans la page où son posées les questions.</li>
<li>Commentaires placés au-dessus du menu, dans la page où son posées les questions.</li>
<li>Utilisation de la touche "Entrée" du clavier pour valider les réponses de type "cases à remplir".</li>
<li>Possibilité d'afficher les réponses dans un ordre aléatoire.</li>
<li>Généralisation du système pour afficher un texte pris au hasard parmi plusieurs textes disponibles.</li>
<li>Possibilité de placer les images associées aux questions dans des dossiers au choix.</li>
<li>Rappel des thèmes choisis dans la page d'évaluation.</li>
<li>Amélioration du système de création des boutons qui ouvrent les pages HTML.</li>
<li>Abandon de la page "plein_ecran.html".</li>
</ul>

<a name="a9b14"></a><h3>Version 14 - Avril 2008</h3>
<ul>
<li>Mise en place d'une barre de caractères spéciaux pour insérer facilement ces caractères
dans les zones de texte à compléter.
<li>Possibilité de définir pour chaque question, pour chaque thème ou pour l'ensemble de tous les thèmes,
les outils d'aide à la communication :
Les images, les messages au début de chaque question, les commentaires après la réponse apportée par l'élève,
les boutons ouvrant des pages d'aide, les barres de caractères spéciaux.
Un outil de communication défini pour une question est prioritaire sur celui défini pour le thème,
lui-même prioritaire sur celui défini pour l'ensemble de l'exercice.
</ul>

<a name="a9b15"></a><h3>Version 15 - Septembre 2008</h3>
<ul>
<li>Zone d'affichage occupant 100% (au lieu de 99%) de la fenêtre.
<li>Restructuration du code selon l'architecture Modèle-Vue-Contrôleur.
<li>Suppression des nombres de questions proposés par défaut dans la page d'accueil.
<li>Mode aléatoire (pour poser les questions) automatique dès qu'un ou plusieurs
nombres de questions sont définis dans le fichier <i>donnees.js</i>.
<li>Possibilité de présenter les choix des thèmes et des nombres de question 
avec des listes de sélection.
<li>Pour les fenêtres qui s'ouvrent en cliquant sur des boutons,
possibilité d'en définir les dimensions.
<li>Ajout d'une feuille de style pour l'impression des résultats.
</ul>

<a name="a9b16"></a><h3>Version 16 - Février 2009</h3>
<ul>
<li>Possiblité de sauvegarder les scores dans un fichier lorsque Dyris est placé sur un serveur pourvu du module PHP.
<li>Dans le fichier <i>donnees.js</i>, utilisation des caractères x, o ou * pour signifier qu'une case ou un bouton radio doit être coché.
<li>Suppression du titre de la page évaluation.
</ul>

<a name="a9b17"></a><h3>Version 17 - Mai 2010</h3>
<ul>
<li>Création d'une option d'évaluation sommative dans laquelle l'élève ne voit pas les bonnes réponses ni les notes obtenues aux questions.
<li>Fonctions <i>mode_theme()</i> et <i>mode_question()</i> regroupées en une seule fonction <i>mode_presentation()</i>.
<li>Identifiant demandé à la page d'accueil plutôt qu'à la page d'évaluation.
<li>Style des images associées aux questions défini dans le fichier <i>presentation.css</i>.
<li>Pour l'affichage du choix des thèmes dans la page d'accueil, seules deux présentations sont retenues,
celle avec les cases à cocher et celle avec les boutons "radio".
<li>Pour l'affichage des nombres de questions dans la page d'accueil,
seule la présentation avec les boutons "radio" est retenue.
</ul>




<a name="a10"></a><h2>Structure du logiciel</h2>

<p>Dyris est écrit en <i>HTML</i> et en <i>JavaScript</i>.
Ces langages sont interprétés par votre navigateur (<i>FireFox</i>, <i>Internet Explorer</i>...).</p>
<p>Le programme comporte de nombreuses fonctions, traite des fichiers contenant des données, affiche plusieurs pages.
Dans ce genre de programme, il faut éviter d'appeler une fonction qui n'est pas encore chargée.
Une solution consiste à précharger l'ensemble du programme avant son utilisation.</p>
<p>La page <i>index.html</i> définit deux frames (cadres).</p>
<ul>
<li>La première sert à l'affichage. Elle monopolise la totalité de l'écran.</li>
<li>La deuxième sert à stocker le programme, à conserver des données lorsqu'une page en remplace une autre.</li>
</ul>
<p>Au début, dans les deux frames sont chargées respectivement deux pages:</p>
<ul>
<li>La page <i>chargt.html</i>, presque vide, invitant l'utilisateur à patienter pendant le chargement du programme.</li>
<li>La page <i>cache.html</i>, contenant l'ensemble du programme.</li>
</ul>
<p>Une fois le fichier <i>cache.html</i> entièrement chargé, la page <i>chargt.html</i> est remplacée par la page <i>page1.html</i>.
L'exercice peut alors commencer.</p>
<p>Certains navigateurs refusent de recharger une même page.
Deux pages identiques ont donc étés créées : <i>page1.html</i> et <i>page2.html</i>.
Si la page <i>page1.html</i> est affichée, alors la prochaine page à être affichée sera la page <i>page2.html</i>.
Et inversement.</p>


<p>Le programme est organisé en trois modules :</p>
<ul>
<li>Le module <i>modele.js</i> gère les données définies par les fichiers <i>donnees.js</i> et <i>textes.js</i>.
<li>Le module <i>vue.js</i> affiche les pages sur l'écran de l'ordinateur.
<li>Le module <i>controleur.js</i> modifie l'affichage (et, éventuellement, les données) en fonction des actions de l'utilisateur.
</ul>
<p>Le questionnaire, situé dans le fichier <i>donnees.js</i>, est préchargé à l'avance.
Les images associées aux questions sont chargées au moment où les questions sont posées.
Cela limite les attentes dues aux chargements.</p>
<p>Dyris peut être programmé dans n'importe quelle langue : Les textes sont écrits dans le fichier <i>textes.js</i>.</p>


</body>
</HTML>
